<template>
  <div class="index">
    <div class="countList">
      <div class="count" v-on:click="$router.push('/userlist')">
        <div class="number">{{userCount}}</div>
        <div class="info">用户总数</div>
      </div>
      <div class="count" v-on:click="$router.push('/musiclist')">
        <div class="number">{{musicCount}}</div>
        <div class="info">音乐总数</div>
      </div>
      <div class="count" v-on:click="$router.push('/singerlist')">
        <div class="number">{{singerCount}}</div>
        <div class="info">歌手总数</div>
      </div>
      <div class="count" v-on:click="$router.push('/gedanlist')">
        <div class="number">{{gedanCount}}</div>
        <div class="info">歌单总数</div>
      </div>
      <div class="count" v-on:click="$router.push('/mvlist')">
        <div class="number">{{mvCount}}</div>
        <div class="info">MV总数</div>
      </div>
    </div>
    <div class="echs">
      <div class="ech">
        <div class="title">用户性别比例</div>
        <div id="first" class="ec"></div>
      </div>
      <div class="ech">
        <div class="title">歌手性别比例</div>
        <div id="second" class="ec"></div>
      </div>
      <div class="ech">
        <div class="title">音乐类型分布</div>
        <div id="third" class="ec"></div>
      </div>
      <div class="ech">
        <div class="title">歌手类型分布</div>
        <div id="four" class="ec"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCount } from '../../utils/api'
export default {
  data () {
    return {
      // 用户数量
      userCount: 0,
      // 歌曲数量
      musicCount: 0,
      // 歌手数量
      singerCount: 0,
      // 歌单数量
      gedanCount: 0,
      // mv数量
      mvCount: 0,
      // 男性用户数量
      nanUserCount: 0,
      // 女性用户数量
      nvUserCount: 0,
      // 男性歌手数量
      nanSingerCount: 0,
      // 女性歌手数量
      nvSingerCount: 0,
      // 歌手类型数组
      singerType: [],
      // 歌手类型数量数组
      singerTypeCount: [],
      // 音乐类型数组
      musicType: [],
      // 音乐类型数量数组
      musicTypeCount: []
    }
  },
  async mounted () {
    // 获取数据
    let res = await getCount();
    if (res.status == 0) {
      // 设置数据
      this.userCount = res.data.userCount;
      this.musicCount = res.data.musicCount;
      this.singerCount = res.data.singerCount;
      this.gedanCount = res.data.gedanCount;
      this.mvCount = res.data.mvCount;
      this.nanUserCount = res.data.nanUserCount;
      this.nvUserCount = res.data.nvUserCount;
      this.nanSingerCount = res.data.nanSingerCount;
      this.nvSingerCount = res.data.nvSingerCount;
      let singerTypeArr = res.data.singerTypeArr;
      for (var i = 0; i < singerTypeArr.length; i++) {
        this.singerType.push(singerTypeArr[i].name);
        this.singerTypeCount.push(singerTypeArr[i].count)
      }
      let musicTypeArr = res.data.musicTypeArr;
      for (var j = 0; j < musicTypeArr.length; j++) {
        this.musicType.push(musicTypeArr[j].name);
        this.musicTypeCount.push(musicTypeArr[j].count)
      }
      this.$message({
        type: 'success',
        message: '获取数据成功！'
      })
    } else {
      this.$message.error('获取数据失败，数据不会显示！')
    }
    // 设置图形
    var echarts = window.echarts;
    var option = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '性别',
          type: 'pie',
          radius: '50%',
          data: [
            { value: this.nanUserCount, name: '男' },
            { value: this.nvUserCount, name: '女' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    echarts.init(document.getElementById('first')).setOption(option);
    var option1 = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '性别',
          type: 'pie',
          radius: '50%',
          data: [
            { value: this.nanSingerCount, name: '男' },
            { value: this.nvSingerCount, name: '女' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    echarts.init(document.getElementById('second')).setOption(option1);
    var option2 = {
      tooltip: {
        trigger: 'item'
      },
      xAxis: {
        type: 'category',
        data: this.singerType
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.singerTypeCount,
          type: 'bar'
        }
      ]
    };
    echarts.init(document.getElementById('third')).setOption(option2);
    var option3 = {
      tooltip: {
        trigger: 'item'
      },
      xAxis: {
        type: 'category',
        data: this.musicType
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.musicTypeCount,
          type: 'bar'
        }
      ]
    };
    echarts.init(document.getElementById('four')).setOption(option3);
  }
}
</script>

<style lang="less" scoped>
	.countList {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
		.count {
			width: 18.5%;
			height: 100px;
			background: #fff;
			padding: 0 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 10px;
      cursor: pointer;
			.number{
				font-size:26px; 
			}
			.info{
				font-size:14px;
			}
		}
	}
	.echs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 10px;
		.ech{
			width: 48.5%;
			height: 300px;
			margin: 6px 0;
			display: flex;
			flex-direction: column;
			.title{
				height: 22px;
				line-height: 22px;
				font-size: 18px;
				font-weight: 550;
			}
			.ec{
				flex: 1;
				width: 100%;
				background: #fff;
				margin-top: 8px;
				border-radius: 10px;
			}
		}
	}
</style>